<template>
  <div class="home" ref="homePage">
    <!-- 头部 -->
    <div style="height: 60px;display: flex;align-items: center;position: absolute;width: 100%;">
      <div class="search">
        <div @click="select" class="search_cs">
          <span>{{current}}</span>
          <van-icon name="arrow-down" />
        </div>
        <div class="search_in">
          <form action="/">
            <van-search placeholder="搜索想要的旅游产品或服务" v-model="search_value" @search="issuecontent" />
          </form>
        </div>
        <div id="container" style="display:none;"></div>
      </div>
    </div>

    <van-popup position="" style="width: 100%;height: 100%;" v-model="show">
      <van-nav-bar title="城市列表" left-arrow @click-left="onClickLeft" />
      <div style="width: 100%;height: 46px;"></div>
      <div class="current">
        <div class="current_box">
          <span>当前城市</span>
          <span style="color: #00CBA6;">{{current}}</span>
        </div>
        <div class="current_box">
          <span>定位城市</span>
          <span style="color: #00CBA6;display: flex;align-items: center;">
            <van-icon name="location" size="16px" />{{chengshi}}</span>
        </div>
      </div>
      <div class="popular">
        <p class="popular_p">热门城市</p>
        <div style="display: flex;flex-wrap: wrap;justify-content: space-around;">
          <div @click="popularCs(itme)" class="popular_cs" v-for="(itme,index) in Popular" :key="index">{{itme}}</div>
        </div>
      </div>
      <van-index-bar :index-list="nameData">
        <div v-for="(data,index) in ityList" :key="index">
          <van-index-anchor :index="data.id">{{data.name}}</van-index-anchor>
          <van-cell @click="cell(res.name)" v-for="(res,index) in data.content" :key="index" :title="res.name" />
        </div>
      </van-index-bar>
    </van-popup>

    <!-- 轮播 -->
    <div class="swipe">
      <van-swipe :autoplay="3000" indicator-color="#46d0ca">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img width="100%" height="100%" :src="image.ImgSrc" @click="Adverlink(image.Url)" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="banla" @click="Service">
      <img src="../assets/home/gongzong.jpg" />
    </div>

    <div class="content nav">
      <router-link class="a_icon" to="/Scenic/ScenicHome">
        <!-- 景区 -->
        <div class="icon">
          <img src="../assets/home/jingqu.png" />
        </div>
      </router-link>
      <router-link class="a_icon" to="/Hotel/kingwine">
        <!-- 酒店 -->
        <div class="icon">
          <img src="../assets/home/jiudian.png" />
        </div>
      </router-link>
      <router-link class="a_icon" to="/Hotel/Jingjiu">
        <!-- 景酒 -->
        <div class="icon">
          <img src="../assets/home/jijiu.png" />
        </div>
      </router-link>
      <router-link class="a_icon" to="/Home/traffic">
        <!-- 交通 -->
        <div class="icon">
          <img src="../assets/home/jiaotong.png" />
        </div>
      </router-link>
      <router-link class="a_icon" to="/Food/food">
        <!-- 美食 -->
        <div class="icon">
          <img src="../assets/home/meishi.png" />
        </div>
      </router-link>
      <router-link class="a_icon" to="/shopping/shopping">
        <!-- 购物 -->
        <div class="icon">
          <img src="../assets/home/gouwu.png" />
        </div>
      </router-link>
      <router-link class="a_icon" to="/specialty/specialty">
        <!-- 特产 -->
        <div class="icon">
          <img src="../assets/home/tecan.png" />
        </div>
      </router-link>
      <router-link class="a_icon" to="/Home/excitingActivity">
        <!-- 活动日历 -->
        <div class="icon">
          <img src="../assets/home/rili.png" />
        </div>
      </router-link>
      <router-link class="a_icon" to="/language/language">
        <!-- 语音导览 -->
        <div class="icon">
          <img src="../assets/home/yuying.png" />
        </div>
      </router-link>
      <router-link class="a_icon" to="/weather/weatherdetails">
        <!-- 景区天气 -->
        <div class="icon">
          <img src="../assets/home/tianqi.png" />
        </div>
      </router-link>
      <router-link class="a_icon" to="/Raiders/Raiders">
        <!-- 精彩攻略 -->
        <div class="icon">
          <img src="../assets/home/gongluo.png" />
        </div>
      </router-link>
      <router-link class="a_icon" to="/Complaint/Complaint">
        <!-- 我要投诉 -->
        <div class="icon">
          <img src="../assets/home/tousu.png" />
        </div>
      </router-link>
    </div>
    <router-view />
    <div class="homebottm">
      <div class="topic">
        <span style="color: rgb(40, 40, 40);">特色玩法</span>
        <span class="border"></span>
      </div>
      <div class="chara">
        <div class="chara_bj_a" @click="popular">
          <img src="../assets/home/tp/1.png" />
          <span>当前热门景区</span>
        </div>
        <div class="chara_bj_b" @click="foodlist">
          <img src="../assets/home/tp/2.png" />
          <span>美食榜</span>
        </div>
        <!-- <img  src="../assets/home/remen.png" />
        <img  src="../assets/home/meishibang.png" /> -->
      </div>
      <div class="chara_char">
        <div @click="xiayizhan" class="cahra_char_a">
          <img src="../assets/home/tp/3.png" />
          <span>下一站</span>
        </div>
        <div @click="RaidersDetails" class="cahra_char_b">
          <img src="../assets/home/tp/4.png" />
          <span>初游陇南</span>
        </div>
        <div @click="Boutique" class="cahra_char_c">
          <img src="../assets/home/tp/5.png" />
          <span>精品路线</span>
        </div>
        <!-- <img style="width: 32.5%;height: 80px;" src="../assets/home/xiayizhan.png" />
        <img style="width: 32.5%;height: 80px;" src="../assets/home/chuyou.png" />
        <img style="width: 32.5%;height: 80px;" src="../assets/home/jingping.png" /> -->
      </div>
    </div>
    <div class="homebottm">
      <div class="topic">
        <span style="color: rgb(40, 40, 40);">旅行专题</span>
        <span class="border"></span>
      </div>
      <div class="bottomimg" @click="qinzixing">
        <img width="90%" height="aoto" src="../assets/home/zhuanti.jpg" />
        <van-divider class="font">亲子游</van-divider>
      </div>
      <div class="bottomimg" @click="Onecardtour">
        <img width="90%" height="aoto" src="../assets/home/yiri.jpg" />
        <van-divider class="font">一卡游陇南</van-divider>
      </div>
      <div class="bottomimg" @click="haohaoxing">
        <img width="90%" height="aoto" src="../assets/home/haoxing.jpg" />
        <van-divider class="font">陇南好行</van-divider>
      </div>
    </div>
    <div id="copyright" class="copyright">
      深圳市博图数字传媒有限公司,
      <a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备 11018280号</a><br /> All Rights Reserved,
      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030402000269">粤公网安备 44030402000269号</a>
    </div>
    <v-min></v-min>
  </div>
</template>

<script>
import list from '@/views/Onecardtour/list.vue'
import min from '@/views/Min.vue'
import city from '@/assets/js/city.js'
import AMap from 'AMap'
import Cookies from 'js-cookie'
import {
  publicad
} from '@/api/home.js'
export default {
  components: {
    'v-list': list,
    'v-min': min
  },
  data () {
    return {
      clintHeigth: '', // 获取页面高度
      // 头部
      show: false,
      chengshi: '', // 定位
      current: '', // 选择城市
      search_value: '',
      nameData: [
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
        'W',
        'X', 'Y', 'Z'
      ],
      Popular: ['上海', '北京', '广州', '深圳', '武汉', '天津', '西安', '南京', '杭州', '成都', '重庆', '郑州'],
      ityList: city, // 城市数组
      // 头部以下
      images: [

      ]
    }
  },

  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 100;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
    if (sessionStorage.getItem("city")) {
      this.current = sessionStorage.getItem("city")
    } else {
      this.mapinit()
    }
    this.publicad()
  },
  beforeRouteLeave (to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false // B 跳转到 A 时，让 A 缓存，即不刷新
    next()
  },
  methods: {
    mapinit () { // 定位
      let that = this
      let map = new AMap.Map('container', {
        enableHighAccuracy: true,

        resizeEnable: true,
        center: [114.085947, 22.547],
        zoom: 8
      })
      // document.getElementById('adcode').innerHTML = '当前城市adcode：' + map.getAdcode() + '<br>' +
      //   '当前中心点：' + map.getCenter()
      // 获取用户所在城市信息
      function showCityInfo () {
        // 实例化城市查询类
        let citysearch = new AMap.CitySearch()
        // 自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function (status, result) {
          localStorage.setItem('Jingweilng', result.bounds.oc.lng) // 获取经纬度
          localStorage.setItem('Jingweilat', result.bounds.oc.lat) // 获取经纬度
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.city && result.bounds) {
              // console.log(JSON.stringify(result));
              let cityinfo = result.city
              let citybounds = result.bounds
              that.chengshi = cityinfo
              that.current = cityinfo
              // document.getElementById('info').innerHTML = '您当前所在城市：' + cityinfo;
              // 地图显示当前城市
              map.setBounds(citybounds)
            }
          } else {
            // document.getElementById('info').innerHTML = result.info;
            // console.log(result)
          }
        })
      }
      showCityInfo()
    },
    select () { // 打开选择城市
      this.show = true
    },
    cell (e) { // 选择城市
      this.current = e
      this.show = false
      // console.log(e)
      // console.log(this.chengshi)
    },
    popularCs (e) { // 选择热门城市
      this.current = e
      this.show = false
      sessionStorage.setItem("city", e)
      // console.log(e)
    },
    onClickLeft () { // 关闭选择城市
      this.show = false
    },
    xiayizhan () {
      this.$router.push({
        path: '/Nextstop/nextstop'

      })
    },
    RaidersDetails () {
      this.$router.push({
        path: '/Raiders/RaidersDetails',
        query: {
          artSN: 'G78QBWBH'
        }
      })
    },
    Boutique () {
      this.$router.push({
        path: '/Boutique/Boutique'

      })
    },

    Service () {
      this.$router.push({
        path: '/Home/Service'

      })
    },
    Onecardtour () {
      this.$router.push({
        path: '/Onecardtour/Onecardtour'

      })
    },
    foodlist () {
      this.$router.push({
        path: '/Onecardtour/foodlist'

      })
    },
    popular () {
      this.$router.push({
        path: '/Onecardtour/popular'

      })
    },
    qinzixing () {
      this.$router.push({
        path: '/Onecardtour/qinzixing'

      })
    },
    haohaoxing () {
      this.$router.push({
        path: '/Onecardtour/haohaoxing'

      })
    },
    weatherdetails () {
      this.$router.push({
        path: '/weather/weatherdetails'

      })
    },
    publicad () {
      let data = {
        Key: 'home-index-foucs'
      }
      publicad(data).then(res => {
        console.log(res)
        this.images = res.Data
      })
    },
    Adverlink (url) {
      // console.log(url)
      window.location.href = url
    },
    issuecontent () {
      this.$router.push({
        path: '/Scenic/ScenicHome',
        query: {
          value: this.search_value
        }
      })
    }
  }
}
</script>

<style lang="scss">
.home {
  background: #ffffff;

  .search {
    width: 90%;
    margin: 0 auto;
    display: flex;
    background: white;
    height: 40px;
    border: 1px solid #46d0ca;
    z-index: 9;
    border-radius: 30px;

    .search_cs {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90px;

      .van-icon {
        font-size: 14px !important;
        margin-left: 4px;
      }
    }

    .search_in {
      display: flex;
      align-items: center;
      width: 60%;
      .van-search {
        padding: 0 !important;
        background: #ffffff;
        .van-search__content {
          background: none;
          .van-cell {
            border-left: 1px solid rgb(225, 225, 225);
            padding: 0px 0px 0px 10px;
            background: none;
            input {
              background: none;
            }
          }
        }
      }
      // input {
      //   border: none;
      //   border-left: 1px solid #999999;
      //   border-radius: 0 !important;
      // }
    }
  }

  .current {
    display: flex;
    padding: 0.625rem 1rem;
    line-height: 2rem;
    font-size: 1.125rem;
    background: #ffffff;
    justify-content: space-between;
    color: #999999;

    .current_box {
      width: 50%;
      display: flex;
      justify-content: space-around;
    }
  }

  .popular {
    .popular_p {
      padding: 10px 16px;
      background: #f5f5f5;
      font-size: 1.1rem;
    }

    .popular_cs {
      width: 80px;
      height: 30px;
      margin: 0.625rem 0.625rem;
      border-radius: 1.875rem;
      border: 1px solid #e4e4e4;
      display: flex;
      font-size: 1rem;
      align-items: center;
      justify-content: center;
    }
  }

  .van-index-bar {
    color: #999999 !important;

    .van-index-anchor {
      background: #f5f5f5;
      color: #999999 !important;
      font-weight: 600;
    }

    .van-cell {
      color: #999999 !important;
    }
  }

  .van-popup {
    // top: 0;
    // transform:translate3d(0,0%,0) !important;
    .van-nav-bar {
      .van-nav-bar__left {
        .van-icon {
          font-size: 22px;
          color: white !important;
        }
      }
    }
  }

  .hometop {
    display: flex;
    width: 100%;
    height: 3.75rem;
    background: #ffffff;

    .homeimg {
      width: 100px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      img {
        width: 70%;
      }
    }

    .homeinput {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .input {
        border: none;

        .van-cell {
          width: 85%;
          border-radius: 1.25rem;
          padding: 5px 16px;
          // border: 1px solid #000000;
          background: #f2f2f2;

          .van-icon {
            color: #46d0ca;
            font-size: 1.25rem;
          }
        }
      }

      .input[class*="van-hairline"]::after {
        border: none;
      }
    }
  }

  .swipe {
    width: 100%;
    height: 244px;
    overflow: hidden;

    .van-swipe {
      width: 100%;
      height: 100%;
    }
  }

  .banla {
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 92%;
    }
  }

  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: white;

    .a_icon {
      width: 25%;
      height: 100px;
      display: flex;
      align-items: center;

      // display: flex;
      .icon {
        // width: 33%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        img {
          width: 50%;
        }
      }
    }
  }

  .homebottm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .topic {
      width: 100%;
      height: 5rem;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #191919;
      font-weight: 600;
      font-size: 20px;

      .border {
        width: 1.25rem;
        height: 0.125rem;
        background: #46d0ca;
        margin-top: 0.625rem;
      }
    }

    .chara {
      display: flex;
      justify-content: space-between;
      width: 90%;
      margin-bottom: 4px;
      color: white;

      .chara_bj_a {
        width: 49%;
        height: 65px;
        background: url(../assets/home/remenbj.jpg) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;

        img {
          width: 15px;
          height: 18px;
          margin-right: 5px;
        }
      }

      .chara_bj_b {
        width: 49%;
        height: 65px;
        background: url(../assets/home/meishibj.jpg) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;

        img {
          width: 15px;
          height: 20px;
          margin-right: 5px;
        }
      }

      // img {
      //   padding: 3px;
      // }
    }

    .chara_char {
      display: flex;
      width: 90%;
      justify-content: space-between;
      color: white;

      .cahra_char_a {
        width: 32%;
        height: 65px;
        background: url(../assets/home/xiayizhanbj.jpg) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;

        img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }

      .cahra_char_b {
        width: 32%;
        height: 65px;
        background: url(../assets/home/chuyoubj.jpg) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;

        img {
          width: 15px;
          height: 20px;
          margin-right: 5px;
        }
      }

      .cahra_char_c {
        width: 32%;
        height: 65px;
        background: url(../assets/home/jingpinbj.jpg) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;

        img {
          width: 15px;
          height: 18px;
          margin-right: 5px;
        }
      }
    }

    .bottomimg {
      position: relative;
      width: 100%;
      height: 150px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;

      .font {
        position: absolute;
        width: 9.5rem;
        color: white;
      }
    }
  }
}
.copyright {
  padding: 0 15px 20px;
  font-size: 12px;
  color: #999;
  text-align: center;
  a {
    color: #999;
  }
}
</style>
